<template>
	<u-popup v-model="show" mode="center" border-radius="14">
		<view class="receive">
			<view class="title">
				核销码
			</view>
			<view class="check-code" @click="handCopyCode">
				{{ info.check_code }}
			</view>
			<view class="shop-card">
				<view class="name">{{ shopInfo.store_name }}</view>
				<view class="address" @click="handCopy">
					<text>地址:</text>
					<text>{{ shopInfo.province }}{{ shopInfo.city }}{{ shopInfo.district }}{{ shopInfo.detail_address }}</text>
				</view>
				<view class="address" @click="handCall">
					<text>电话:</text>
					<text>{{ shopInfo.consumer_hotline }}</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		doShop
	} from '@/api/home.js'
	export default {
		data() {
			return {
				info: {},
				shopInfo: {},
				show: false
			}
		},
		methods: {
			async showEdit(e) {
				this.info = e
				const {
					data
				} = await doShop()
				this.shopInfo = data
				this.show = true
			},
			handCopyCode() {
				uni.setClipboardData({
					data: this.info.check_code,
					success: function() {
						console.log('success');
					}
				});
			},
			handCopy() {
				const address =
					`${this.shopInfo.province}${this.shopInfo.city}${this.shopInfo.district}${this.shopInfo.detail_address}`
				uni.setClipboardData({
					data: address,
					success: function() {
						console.log('success');
					}
				});
			},
			handCall() {
				uni.makePhoneCall({
					phoneNumber: this.shopInfo.consumer_hotline
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.receive {
		width: 600rpx;
		padding-bottom: 40rpx;

		.title {
			padding-top: 20rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
		}

		.check-code {
			text-align: center;
			margin-top: 30rpx;
			font-weight: bold;
			font-size: 60rpx;
		}

		.shop-card {
			background-color: #eee;
			width: calc(100% - 40rpx);
			margin: 20rpx auto 0 auto;
			box-sizing: border-box;
			padding: 20rpx;
			border-radius: 20rpx;

			.name {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
			}

			.address {
				color: gray;
				font-size: 28rpx;
				margin-top: 15rpx;
			}
		}
	}
</style>